import { useEffect } from 'react';
import Masonry, {ResponsiveMasonry} from "@/components/ReactResponsiveMasonry"
import './index.less';
import tem1 from '@/assets/tem1.png';
import tem2 from '@/assets/tem2.png';
import tem3 from '@/assets/tem3.png';
import tem4 from '@/assets/tem4.avif';
import tem5 from '@/assets/tem5.png';



const TemplateList = () => {
    const templates = [tem1, tem2, tem3, tem4, tem5, tem1, tem2, tem3, tem4, tem5, tem1, tem2, tem3, tem4, tem5];

    useEffect(() => {
        // const $container = document.querySelector('#template-ul')
        // const masonry = new Masonry($container)
        // masonry.init()
        
    }, []);

    return (
        <>
            <div style={{ height: 70 }}></div>
            <ul className='template-ul' id="template-ul">
                <ResponsiveMasonry
                    columnsCountBreakPoints={{350: 1, 600: 2, 900: 3, 1000: 4, 1600: 5}}
                >
                    <Masonry columnsCount={3} gutter="10px">
                        {
                            templates.map((template, index) => (
                                <li key={index} className='template-li'>
                                    <img src={template} alt="template" />
                                    <div>十岁礼抠图像</div>
                                </li>
                            ))
                        }
                    </Masonry>
                </ResponsiveMasonry>
            </ul>
        </>
    )
}

export default TemplateList;